<template> 
    <div class="login-bg" v-if="pageShow">
        <image class="bg-img"  src="https://rqys.hleason.com/dist/images/login_bg.png"></image>
        <div class="main"> 
            <login-input v-model="form.phone" placeholder="请输入手机号"></login-input>
            <login-input v-model="form.msg" type="reg" placeholder="请输入验证码" @send="sendMsg" :second="countdown" :disabled="disabled"></login-input> 
            <div class="sub-btn text-center" @click="submitLogin(1)"> 确 定 </div>
            <div class="hit-text text-center"  @click="submitLogin(2)">
                <span class="iconfont-yonghu iconfont"></span>
                <span>游客登录</span>
            </div>
        </div>
        <div class="module-box" v-if="subUserInfo">
            <div class="module-content">
                <botton open-type="getUserInfo" class="text-center"  @getuserinfo="bindGetUserInfo" @click="userInfo">同意获取用户信息</botton> 
            </div>
        </div>
        
    </div> 
</template>

<script>
import loginInput from '@/components/tpl/login-input' 
import * as api from '@/utils/api' 
export default {
    onLoad(){   
        if(wx.getStorageSync('h_token')&&wx.getStorageSync('u_id')&&wx.getStorageSync('opendId')){
            let url='./../index/main';
            wx.reLaunch({url}); 
            wx.setNavigationBarTitle({ title: '仁青益寿' });
            this.pageShow=false;
        }else{
            this.pageShow=true;
            wx.setNavigationBarTitle({ title: '绑定手机号' });
            wx.setNavigationBarColor({backgroundColor:'#CD4640',frontColor:'#ffffff'});
            wx.login({ 
                success: function(res) {
                    api.getOpendId({code:res.code}).then(res=>{
                        wx.setStorageSync('opendId',  res.data.data.openid);
                        wx.setStorageSync('session_key',  res.data.data.session_key); 
                    }); 
                }
            });  
        } 
    },
    components: {
        loginInput
    }, 
    data () {
        return {
            pageShow:false,
            form:{
                phone:'',
                msg:''
            }, 
            countdown:60,
            disabled:true,
            subUserInfo:false,
        }
    },
    methods:{ 
        submitLogin(val){
            let vm = this; 
            if(val==1){
                if(vm.regFrom()){
                    let body={
                        data:{
                            phone:vm.form.phone.trim(),
                            code:vm.form.msg,
                            device_id:wx.getStorageSync('opendId'),
                            type:1
                        }
                    };
                    vm.apiLogin(body);
                }
            }else{
               let body={
                    data:{
                        phone:'',
                        code:'',
                        device_id:wx.getStorageSync('opendId'),
                        type:1
                    }
                };
                vm.apiLogin(body);
            }  
        },
        apiLogin(body){
            let vm = this;
            api.postLogin(body).then(res=>{
                if(res.data.code==200){
                    wx.setStorageSync('h_token', res.data.data.token);
                    wx.setStorageSync('u_id',  res.data.data.id);  
                    wx.setStorageSync('userDate', JSON.stringify(res.data.data)); 
                    let url='./../index/main';
                    wx.reLaunch({url}); 

                    //获取用户信息
                    // vm.subUserInfo=true;
                } 
            }) 
        },
        regFrom(){
            let vm=this;
            let phoneNo=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            // let regPwd=/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;
            if(vm.form.phone.length>11||!phoneNo.test(vm.form.phone.trim())||vm.form.phone==''){
                wx.showToast({icon:'none',title:'请输入正确的手机号'});
                return false;
            }
            else if(vm.form.msg==''){
                wx.showToast({icon:'none',title:'验证码不能为空'});
                return false;
            }
            else{
                return true;
            }
        },
        //发送验证码
        sendMsg(){ 
            let vm = this; 
            let phoneNo=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            if(vm.form.phone&&phoneNo.test(vm.form.phone.trim())){
                api.getSendMsg({phone:vm.form.phone}).then(res=>{
                    if(res.data.code==200){
                        vm.settime()
                    }
                })
            }else{
                wx.showToast({icon:'none',title:'请输入手机号'});
            }  
        },
        settime() {
            let vm = this;
            if (vm.countdown == 0) { 
                vm.disabled=true;
                vm.countdown = 60;
            } else {
                vm.disabled=false;
                vm.countdown--;
                setTimeout(function() {
                    vm.settime()
                },1000)
            }
        },
        userInfo(){
            let vm = this;
            wx.getSetting({
                success(res) {
                    if (!res.authSetting['scope.userInfo']) { 
                        wx.authorize({
                            scope: 'scope.userInfo',
                            success() {
                                wx.getUserInfo({
                                    success: function(res) { 
                                        // wx.showModal({
                                        //     title: '提示',
                                        //     content: JSON.stringify(res),
                                        //     showCancel: false
                                        // })
                                        vm.subUserInfo=false;
                                        wx.setStorageSync('wxInfo', JSON.stringify(res.userInfo)); 
                                        let url='./../index/main';
                                        wx.reLaunch({url}); 
                                    },
                                    fail:function(res) {
                                        // wx.showModal({
                                        //     title: '提示',
                                        //     content: JSON.stringify(res),
                                        //     showCancel: false
                                        // })
                                        vm.subUserInfo=false;
                                        let url='./../index/main';
                                        wx.reLaunch({url}); 
                                    }
                                })  
                            }
                        })
                    }else{
                        wx.getUserInfo({
                            success: function(res) { 
                                // wx.showModal({
                                //     title: '提示',
                                //     content: JSON.stringify(res),
                                //     showCancel: false
                                // })
                                vm.subUserInfo=false;
                                wx.setStorageSync('wxInfo', JSON.stringify(res.userInfo)); 
                                let url='./../index/main';
                                wx.reLaunch({url});  
                            },
                            fail:function(res) { 
                                // wx.showModal({
                                //     title: '提示',
                                //     content: JSON.stringify(res),
                                //     showCancel: false
                                // })
                                vm.subUserInfo=false;
                                let url='./../index/main';
                                wx.reLaunch({url}); 
                            }
                        })
                    }
                }
            }) 
            
        },
    
    }, 
}

</script>
 
<style scoped lang="scss">
 
.login-bg{
    position:relative;
    height:100%;
    .module-box{
        position:fixed;
        top:0;  
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,0.6);
        z-index:20;
        .module-content{
            
            height:400rpx;
            width:90%;
            margin:45% auto 0; 
            z-index:25;
            background:#fff;
            border-radius:10rpx;
            padding-top:150rpx;
            box-sizing:border-box;
            botton{
                display:block;
                width:70%;
                margin: auto;
                padding:20rpx 30rpx;
                border:1rpx solid #CD4640;
                border-radius:20rpx;
                color:#fff;
                background:#CD4640;
                &:active{
                    background-color:rgba(205,70,64,0.5)
                }
            }
        }
    }
    
    .bg-img{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
    }
    .main{
        position:absolute;
        z-index:10;
        width:100%;
        padding:60rpx;
        box-sizing:border-box;
        margin-top:220rpx;
        .sub-btn{
            width:100%;
            height:80rpx;
            line-height:80rpx;
            background:#CD4640;
            color:#fff;
            border-radius:10rpx;
            margin-top:45rpx;
        }   
        .sub-btn:active{
            background-color:rgba(205,70,64,0.5)
        }
        .hit-text{
            width:120rpx;
            color:#f4f4f4;
            font-size:27rpx;
            margin:100rpx auto 0; 
            .iconfont{
                font-size:60rpx;
                color:#CD4640;
            }
            span{
                display:block;
            }
        }
    }
} 
</style>
